<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>生命周期</title>
    <script src='../node_modules/react/umd/react.development.js'></script>
    <script src='../node_modules/react-dom/umd/react-dom.development.js'></script>
    <script src='../node_modules/babel-standalone/babel.min.js'></script>
    <script src='../node_modules/prop-types/prop-types.js'></script>
</head>

<body>
    <div id='root'></div>
    <script type='text/babel'>
        class Daddy extends React.Component {
            constructor(props) {
                super(props)
                this.state = {
                    showSon: true,
                    count: 0
                }
            }

            render() {
                return (
                    <div>
                        <h1>Daddy count:{this.state.count}</h1>
                        <hr />

                        {this.state.showSon && <MyCom count={this.state.count} />}

                        <hr />
                        <button onClick={
                            () => {
                                this.setState({
                                    showSon: !this.state.showSon
                                })
                            }
                        }>显式/隐藏子组件</button>
                        <button onClick={
                            () => {
                                this.setState({ count: this.state.count + 1 })
                            }
                        }>ADD</button>
                    </div>
                )
            }
        }

        class MyCom extends React.Component {
            constructor(props) {
                console.log("constructor");
                super(props)

                // 初始化组件对内的数据/状态/state
                this.state = {
                    name: "云迪Lee",
                    age: 39
                }
            }

            // static propTypes = {
            //     count: PropTypes.number
            // }

            render() {
                console.log("render");
                return (
                    <div>
                        {/* <div>count from daddy:{this.props.count}</div> */}
                        <h3>我的名字叫{this.state.name}</h3>
                        <h3>今年芳龄{this.state.age}</h3>
                        <button onClick={
                            () => {
                                // ！！！！这是一个错误示范！！！！
                                // this.state.name = "王力宏"

                                /* 以下是修改state的唯一正确打开方式 */
                                // 单独修改state,修改的结果会自动与原state合并
                                this.setState({
                                    name: "古典钢琴小王子"
                                })
                            }
                        }>
                            点我以改变state
                        </button>
                    </div>
                )
            }

            componentDidMount() {
                console.log("componentDidMount");
            }

            componentDidUpdate(prevProps, prevState, snapshot) {
                console.log("componentDidUpdate", prevProps, prevState, snapshot);
            }

            componentWillUnmount() {
                console.log("componentWillUnmount");
            }

            /* 以下为不常用的生命周期 */

            /* 判断组件是否应该被更新 */
            shouldComponentUpdate(nextProps, nextState) {
                console.log("shouldComponentUpdate", nextProps, nextState);

                // 不重新渲染
                // return false

                if (
                    nextState.name !== this.state.name 
                    || nextState.age !== this.state.age 
                    // ||nextProps.count !== this.props.count
                ) {
                    return true
                } else {
                    return false
                }

            }

        }

        ReactDOM.render(<Daddy />, document.getElementById("root"))
    </script>
</body>

</html>